經過之前的介紹，我們這邊就要用到jQuery來做一個點擊觸發事件的效果。事件就是去啟動一個Client介面。也就是說我們的對話框畫面。那這邊先引用外部JavaScript的jQuery。第二，就是我們需要的雙擊點擊效果處發送出表單的事件。

$(document).ready(function(){

    $(".friends").dblclick(function(){

        $("#chat_f").val($(this).text());

        $("#form").submit();

    });

});

以上是用jQuery去做雙擊效果並且把表單送出的功能。 這邊程式碼較短，你也可以用JavaScript去做這個效果。只是我們用jQuery直覺上比較簡單也清楚。

前面我們有看到第二個畫面裡面有個表單

%form{:action =>"chat",:method =>"post",:id => "form"}

我們會傳送到chat這個路由去進行通訊。那麼在原本au_server裡面，就可以定義以下路由:

post '/chat' do

    # 不在登入時進入則導向一開始的畫面

    if session[:id] == nil

        session.clear

        redirect 'hello'

    else

        if session[:id].to_s.eql?(mongo_id(session[:id]).to_s)           

            login_usr = username_by_id(session[:id])

            # 歷史訊息定義

            historyid = []

            historyid.push(login_usr.to_s)

            historyid.push(params[:chat_f].to_s)

            sort_his_id = historyid.sort

            q_history_id = sort_his_id[0].to_s + sort_his_id[1].to_s

            history_json = history_by_id(q_history_id)

            # 導向chat的view畫面，並且傳遞歷史訊息過去顯示。

            haml :chat , :locals => {:user_name => "#{login_usr}",:friend_name => params[:chat_f],:history_msg => history_json} 

        else

            "You are not permissioned to login!"

        end

    end

end

好的，那我們就開始來做chat的頁面並且開始進行與chat_server的傳遞訊息溝通。

以下是 chat.haml :

!!!5

%html

    %head

        %script{:type => "text/javascript",:src => "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"}

        %script{:type => "text/javascript",:src => "send.js"}

        %script{:type => "text/javascript",:src => "websocket.js"}

        -#:javascript

        %title Boo it!

    %body

        .content{:id => "usr_name" , :value => "#{user_name.to_s}"}= user_name

        %a talk to friends:

        %strong{:id => "fri_name" , :value => "#{friend_name.to_s}"}= friend_name

        %input{:type => "text" , :id => "boo" , :name => "boo"}

        %input{:type => "button",:onclick => "booFunction()", :value => "Boo it!"}

        .content{:id => "debug"}

        .dialog{:id => "history_msg"}

            - JSON.parse(history_msg).each do |m|

            - tmpStr = m['from'].to_s + "," + m['to'].to_s + "," + m['log'].to_s

            %p{}= tmpStr

            - end unless @do_nothing

        .dialog{:id => "msg"}

上述程式碼，我們利用jQuery去做動態與chat_server的websocket溝通。並且在溝通之前先行顯示歷史訊息，也就是由/chat路由夾帶過來的參數。如果有歷史訊息則會覆蓋history_msg的標籤。

那接下來就是傳遞訊息的部分，我們用了一個textbox以及一個按鈕來做傳送訊息的功能。那定義一個外部JavaScript(send.js)如下:

function booFunction() {

    u_name = document.getElementById("usr_name").innerHTML;

    f_name = $("#fri_name").html();

    dialog = $("#boo").val();

    ws.send(u_name + "," + f_name + "," + dialog);

}

我們利用傳送訊息的格式如下:

User1 , User2 , Message

第一個欄位為傳送方，第二個欄位為接收方，第三個欄位為傳遞訊息。

那傳遞訊息以及接收訊息則會覆蓋msg欄位。並且以append欄位加上<p>標籤顯示。

那我們接下來繼續看與chat_server端的通訊部分，也是使用jQuery來實作client端。

定義websocket.js 如下:

$(document).ready(function(){

    function debug(str){ $("#debug").append("<p>"+str+"</p>"); };

    ws = new WebSocket("ws://127.0.0.1:8080");

    ws.onmessage = function(evt) {

         var tmp = evt.data.split(",")

         if ((tmp[0] == u_name && tmp[1] == f_name) || (tmp[0] == f_name && tmp[1] == u_name)){

             $("#msg").append("<p>"+evt.data+"</p>");

         }

    };

    ws.onclose = function() { debug("socket closed"); };

    ws.onopen = function() {

      debug("connected...");

    };

});

那上述程式碼沒有多大的改變，就拿之前介紹的websocket 的client來稍作修改，唯一比較特別的部分，就是加入了判斷是誰的訊息部份以及雙方同時顯示。

DEMO畫面如下:

我們先分別登入test3 以及 test2畫面，並且在朋友名單選擇要溝通的對象

接下來可以看到test3已經進入通訊畫面，並且顯示之前溝通的歷史訊息:

可以看到test2登入也會同時顯示歷史訊息

那接下來就可以進行通訊

那我們就完成進行傳遞訊息的部分 。

可以看到以上沒有左右顯示(例如line 以及MSN 那樣的編排)

這部分只是顯示問題。我們可以後面再來進行位置調整。

那後續可以來進行其他路由的設定，這邊我們就可以先 Boo-it 一下啦。把你的訊息Boo 出去!